<template>
    <div class="container" @mousedown.stop @contextmenu.prevent>
        <canvas id="canvas"></canvas>
        <div class="lock-box" v-show="!isShowLogin">
            <div class="lock">
                <span class="lock-icon" :title="t('yl.unlockScreen')" @click="changeLoginView(true)">
                    <lock-outlined />
                    <unlock-outlined />
                </span>
            </div>
            <h6 class="tips">{{ t('yl.lockScreenTip') }}</h6>
        </div>
        <div class="login-box" v-show="isShowLogin">
            <a-avatar :size="128">
                <template #icon>
                    <user-outlined />
                </template>
            </a-avatar>
            <div class="username">{{ username }}</div>
            <div class="code">
                <a-input v-model:value="loginForm.code" :placeholder="t('yl.pleaseInputCode')" />
                <img class="code-img" :src="codeImgSrc" @click="getCodeImg" alt="code" />
            </div>
            <a-input-search
                v-model:value="loginForm.password"
                type="password"
                autofocus
                :placeholder="t('yl.pleaseInputPassword')"
                size="large"
                @search="handleSubmitLogin"
            >
                <template #enterButton>
                    <LoadingOutlined v-if="loginLoading" />
                    <arrow-right-outlined v-else />
                </template>
            </a-input-search>
            <a style="margin-top: 10px" @click="handleLoginOut">{{ t('yl.loginOut') }}</a>
        </div>

        <div class="diy-wrap" v-if="isShowDiy">
            <DIY></DIY>
        </div>
        <div class="local-time">
            <div class="time">{{ hour }}:{{ minute }}:{{ second }}</div>
            <div class="date">{{ month }}月{{ day }}号，星期{{ week }}</div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, ref, computed, watch } from 'vue';
import { useTime } from '@/hooks/useTime';
import { LockOutlined, UnlockOutlined, UserOutlined, LoadingOutlined, ArrowRightOutlined } from '@ant-design/icons-vue';
import DIY from './diy.vue';
import { createLockAnimation } from './createLockAnimation';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import { LayoutMutationType } from '@/enums/layoutEnums';
import { UserActionTypes } from '@/enums/userEnums';
import { message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
import { getCode } from '@/api/user';

export default defineComponent({
    name: 'lockscreen',
    components: {
        LockOutlined,
        UnlockOutlined,
        DIY,
        UserOutlined,
        LoadingOutlined,
        ArrowRightOutlined,
    },
    setup() {
        const store = useStore();
        const router = useRouter();
        const route = useRoute();
        const { t } = useI18n();
        // canvas动效
        let timer: number;
        onMounted(() => {
            timer = window.setTimeout(() => {
                createLockAnimation();
                clearTimeout(timer);
            }, 500);
            isLocked.value && getCodeImg();
        });
        const isLocked = computed(() => store.state.layout.isLock);

        watch(
            () => isLocked.value,
            (newValue) => {
                isShowDiy.value = newValue;
                state.isShowLogin = false;
                state.loginForm.password = '';
                newValue && getCodeImg();
                clearTimeout(timer);
            }
        );

        const { month, day, hour, minute, second, week } = useTime();

        const state = reactive({
            isShowLogin: false,
            loginLoading: false, // 正在登录
            loginForm: {
                username: store.state.user.username,
                password: '',
                code: '',
                uuid: '',
            },
        });

        const isShowDiy = ref<boolean>(true);

        const changeLoginView = (value: boolean) => {
            state.isShowLogin = value;
        };
        // code 图片路径
        const codeImgSrc = ref<string>('');
        const getCodeImg = () => {
            getCode().then((res) => {
                const { img, uuid } = res;
                state.loginForm.uuid = uuid;
                codeImgSrc.value = img;
            });
        };

        //登出
        const handleLoginOut = () => {
            changeLoginView(false);
            store.commit(LayoutMutationType.SetLock, false);
            store.dispatch(UserActionTypes.Logout);
        };

        // 登录
        const handleSubmitLogin = () => {
            if (!state.loginForm.code) {
                return message.warning(t('yl.pleaseInputCode'));
            }
            if (!state.loginForm.password) {
                return message.warning(t('yl.pleaseInputPassword'));
            }

            store
                .dispatch(UserActionTypes.Login, state.loginForm)
                .then((res) => {
                    if (!res) return;
                    message.success(t('yl.loginSuccess'));
                    store.commit(LayoutMutationType.SetLock, false);
                    router.push({ path: '/redirect' + route.path });
                })
                .catch(() => {
                    getCodeImg();
                });
        };

        const username = computed(() => store.state.user.username);

        return {
            ...toRefs(state),
            month,
            day,
            hour,
            minute,
            second,
            week,
            isShowDiy,
            username,
            handleSubmitLogin,
            handleLoginOut,
            changeLoginView,
            t,
            codeImgSrc,
            getCodeImg,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    color: $white;
    #canvas {
        position: relative;
        z-index: -1;
        display: block;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .local-time {
        position: absolute;
        z-index: 10;
        bottom: 60px;
        left: 60px;
        font-family: helvetica;
        color: $white;
        .time {
            font-size: 70px;
        }

        .date {
            font-size: 40px;
        }
    }
    .lock-box {
        z-index: 10;
        position: absolute;
        top: 18vh;
        left: 50%;
        transform: translateX(-50%);
        font-size: 34px;

        .tips {
            color: white;
            cursor: text;
        }

        .lock {
            display: flex;
            justify-content: center;
            .lock-icon {
                cursor: pointer;
                .anticon-unlock {
                    display: none;
                }
                &:hover .anticon-unlock {
                    display: initial;
                }
                &:hover .anticon-lock {
                    display: none;
                }
            }
        }
    }
    .diy-wrap {
        position: absolute;
        top: 20vh;
        left: 20%;
        width: 66%;
        height: 60vh;
    }
    .login-box {
        z-index: 99;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        > * {
            margin-bottom: 14px;
        }
        .username {
            font-size: 30px;
        }
        .code {
            @include flex;
            .ant-input {
                height: 36px;
                margin-right: $width8;
            }
        }
    }
}
</style>
